<template>
  <div class="jyhnzwzzqk">
    <div class="header space-between align-center w100">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div class="name">经营户农作物种植情况</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="operator w100">
      <div class="species w100 tac">
        <div class="plant relative pointer" @mouseover="plantShow = true" @mouseleave="plantShow = false">
          {{ text }}<i class="el-icon-caret-bottom"></i>
          <div class="plant-list absolute c-fff" v-show="plantShow">
            <div class="tac item" v-for="(item, index) in plant" :key="index" @click="clickPlant(index)">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="flow">
        <div class="list dib tac" v-for="item in plantList" :key="item.detailId">
          <div class="w100 text-overflow">{{ item.startTime | moment }}~{{ item.endTime | moment }}</div>
          <img
            :src="imgUrl + '/profile/personinfo/2023/6/20/lang13_828444a84a52412e8bfde3f40ad8a0bd.png'"
            class="flow-img"
          />
          <div>{{ item.plantNode }}</div>
        </div>
      </div>

      <div class="proportion flex align-center w100">
        <div class="left flex-column flex-center align-center">
          <dv-decoration-9 class="decoration">{{ info.val20 || 0 }}%</dv-decoration-9>
          <div>经营户种植占比</div>
        </div>
        <div class="right">
          <div>经营户种植面积</div>
          <div class="item-bg bold space-between align-center">{{ info.val21 || 0 }} 亩</div>
          <div class="text">地区总种植面积</div>
          <div class="item-bg bold space-between align-center">{{ Number(info.val22).toFixed(2) || 0 }} 亩</div>
        </div>
      </div>
      <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'" class="w100" />
    </div>
  </div>
</template>

<script>
import agricultureApi from '@/api/agriculture'

export default {
  name: 'Jyhnzwzzqk',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  created() {
    if (this.info.val19) {
      this.plant = this.info.val19.split(',')
      this.text = this.plant[0]
      this.getInfo()
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      plantShow: false,
      plant: [],
      plantList: [],
      text: ''
    }
  },
  methods: {
    clickPlant(index) {
      this.text = this.plant[index]
      this.plantShow = false
      this.getInfo()
    },
    getInfo() {
      agricultureApi.plantStandard({ plantName: this.text }).then((res) => {
        this.plantList = res.data.list
      })
    },
    handleClick() {
      this.$emit('onClick', { name: this.name })
    }
  }
}
</script>

<style lang="scss" scoped>
.jyhnzwzzqk {
  margin-left: 0.1rem;
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .operator {
    .species {
      height: 0.3rem;
      line-height: 0.3rem;
      color: #00cdff;
      font-size: 0.14rem;

      .plant {
        margin: 0 auto;
        width: 1rem;

        .plant-list {
          background: #001442;
          line-height: 0.2rem;

          .item {
            padding: 0.15rem 0.3rem;
          }
        }
      }
    }

    .flow {
      overflow-x: auto;
      width: 6.9rem;

      .list {
        width: 1.65rem;

        .flow-img {
          padding-top: 0.1rem;
          height: 0.6875rem;
          width: 0.6875rem;
        }
      }
    }

    .proportion {
      margin-bottom: 0.1rem;

      .left {
        width: 2.675rem;

        .decoration {
          width: 1.45rem;
          height: 1.45rem;
          margin-bottom: 0.1rem;
        }
      }

      .right {
        width: 3.75rem;

        .item-bg {
          margin-top: 0.1rem;
          color: #00cdff;
          background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang14_75ff42a4495a409a997798a607c4de5c.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position-x: center;
          width: 3.6875rem;
          height: 0.4rem;
          font-size: 0.2rem;
          padding-left: 0.1rem;
        }

        .text {
          margin-top: 0.2rem;
        }
      }
    }
  }
}
</style>